<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/broswerproject.css">
    <script src="js/jquery-1.9.0.min.js"></script>
</head>
<body>
<div class="haedtop">
    <div class="top">
        <div class="left">
            <span class="spana"><a href="#">无限道生态</a></span>
            <span class="spanb"><a href="#">添加到桌面</a></span>
        </div>
        <div class="right">
            <span><a href="login.html">登录</a></span>
            <span><a href="register.html">注册</a></span>
        </div>
    </div>
    <div class="body">
        <div class="logo">
        </div>
        <div class="search">
            <div class="bound">
                <input class="myinput" placeholder="请输入文字">
            </div>
        </div>
        <div class="sublist">
            <div class="sub1">
                <span class="subspan1">新品尝鲜</span>
                <span class="subspan2">海量商品</span>
            </div>
            <div class="sub2">
                <span class="subspan1">全额退款</span>
                <span class="subspan2">未达成全额退</span>
            </div>
            <div class="sub3">
                <span class="subspan1">全国包邮</span>
                <span class="subspan2">部分满意除外</span>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="footleft">
            <span><a href="homepage.html">首页</a></span>
            <span><a href="broswerproject.html">项目浏览</a></span>
            <span><a href="userinfo.html">我的众筹</a></span>
        </div>
        <div class="footright">
            <div class="hou1"><span class="spanbackground1"><a href="sponsorproject.html">发起项目</a></span></div>
            <div class="hou2"><span class="spanbackground2"><a href="help.html">新手帮助</a></span></div>
        </div>
    </div>
</div>
<div class="bpbody">
    <div class="left">
        <div class="list">
            <div class="head">
                <div class="blackbox"></div><span>排序 | compositor</span>
            </div>
            <ul>
                <li><div></div>综合排序</li>
                <li><div></div>最新上线</li>
                <li><div></div>最高金额</li>
                <li><div></div>最多支持</li>
            </ul>
        </div>
        <div class="list">
            <div class="head">
                <div class="blackbox"></div><span>状态 | condition</span>
            </div>
            <ul>
                <li><div></div>全部</li>
                <li><div></div>众筹中</li>
                <li><div></div>即将开始</li>
                <li><div></div>众筹成功</li>
            </ul>
        </div>
    </div>
    <div class="right">
        <span class="title">共<span style="color: #fff600">231</span>个项目</span>
        <div style="width: 100%;height: 1400px">
        <ul>
            <li>
                <div class="img">
                    <img src="images/scan_pro_09.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...
                     </span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
            <li>
                <div class="img">
                    <img src="images/scan_pro_09.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...
                     </span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
            <li>
                <div class="img">
                    <img src="images/scan_pro_09.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...
                     </span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
        </ul>
        <ul>
            <li>
                <div class="img">
                    <img src="images/scan_pro_09.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...
                     </span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
            <li>
                <div class="img">
                    <img src="images/scan_pro_11.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...
                     </span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
            <li>
                <div class="img">
                    <img src="images/scan_pro_23.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...
                     </span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
        </ul>
        <ul>
            <li>
                <div class="img">
                    <img src="images/scan_pro_27.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...
                     </span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
            <li>
                <div class="img">
                    <img src="images/scan_pro_55.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...
                     </span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
            <li>
                <div class="img">
                    <img src="images/scan_pro1_37.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...
                     </span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
        </ul>
        <ul>
            <li>
                <div class="img">
                    <img src="images/scan_pro1_39.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...</span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
            <li>
                <div class="img">
                    <img src="images/scan_pro1_41.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...
                     </span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
            <li>
                <div class="img">
                    <img src="images/scan_pro1_53.png">
                     <span class="spandes">人的气候，天然的红土地，经春秋，抵风雨，培育出优质的蓝莓。
                    24小时速递，保...
                     </span>
                </div>
                <a href="#">杯宁蓝莓，蓝莓中的贵妃</a>
                <div class="barbg"><div class="bar"></div></div>
                <span class="lspan">已筹金额<span style="font-size: larger;color: #0f0f0f">¥2654</span></span><span class="rspan">剩余时间<span style="font-size: larger;color: #0f0f0f">5天</span></span>
            </li>
        </ul>
        </div>
        <div class="bottombar">
            <a href="#" class="norbtn">下一页</a>
            <a href="#" class="numbtn">1</a>
            <span class="spanstyle">...</span>
            <a href="#" class="numbtn">3</a>
            <a href="#" class="numbtn">4</a>
            <a href="#" class="numbtn">5</a>
            <a href="#" class="numbtn">6</a>
            <span class="spanstyle">...</span>
            <a href="#" class="numbtn">46</a>
            <a href="#" class="norbtn">下一页</a>
            <span class="spanstyle">向第</span>
            <input>
            <span class="spanstyle">页</span>
            <a href="#" class="norbtn">跳转</a>
        </div>
    </div>
</div>
<div class="tail">
    <div class="left">
        <div class="top">
            <div class="bg1 div_l"><span class="spana">发起人创建项目</span></div>
            <div class="divarrow"><span > > </span></div>
            <div class="bg2 div_l"><span class="spana">项目获得支持</span></div>
            <div class="divarrow"><span> > </span></div>
            <div class="bg3 div_l"><span class="spana">发起人发放回报</span></div>
            <div class="divarrow"><span> > </span></div>
            <div class="bg4 div_l"><span class="spana">用户得到回报</span></div>
        </div>
        <div class="below">
            <span>关于我们</span><span>|</span>
            <span>服务条款</span><span>|</span>
            <span>项目教程</span><span>|</span>
            <span>新手帮助</span><span>|</span>
            <span>常见问题</span><span>|</span>
            <span>意见反馈</span>
        </div>
    </div>
    <div class="mid">
        <div class="weichat">
            <span>微信公众号</span>
            <img src="images/foot_ewm_05.png">
        </div>
    </div>
    <div class="right">
        <div class="div1"><span>联系我们（9:00 － 18:00）</span></div>
        <div class="div2"><span>400-000-0000</span></div>
        <div class="div3"><span>wuxiandao@zhongchou.com</span></div>
        <div class="div4"><span>qq群：123456789</span></div>
    </div>
</div>
<div class="copyright">
    <span>@版权所有</span>
</div>
</body>
</html>
<script>
    var enter=false;
    $(function () {
        $(".list ul li").click(function () {
            $(this).siblings().css("color","#0f0f0f");
            $(this).css("color","#FFF400")
        });

        $(".right ul li .img").mouseenter(function() {
            $(this).find(".spandes").show("normal");
            $(this).find(".spandes").css("display","block");
            $(this).mouseleave(function() {
                $(this).find(".spandes").hide("normal");
            });
        });
    });
</script>